<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import navbar from '@/components/navbar.vue'
import tabbar from '@/components/tabbar.vue'

// defineProps<{ msg: string }>()
const active = ref(0)
// const username = ref('')
// const password = ref('')
// ruoter
const router = useRouter()

const value1 = ref(0)
const option1 = [
  { text: '从不', value: 0 },
  { text: '默认', value: 1 },
  { text: '总是', value: 2 }
]
const value2 = ref(0)
const option2 = [
  { text: '从不', value: 0 },
  { text: '总是', value: 2 }
]
const goLink = () => {
  console.log('🤡 ~ goLink:', 1111)
  router.push({ path: '/email-list' })
}
onMounted(() => {})
</script>

<template>
  <navbar title="系统" left="true"> </navbar>
  <div class="content">
    <div class="title">行情</div>
    <div class="check-row">
      <div class="sub-title">高级模式</div>
      <div class="checkbox">
        <span class="label">在高级模式中，报价窗口包含点差，时间数据，以及最高价和最低价。</span>
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
      </div>
    </div>
    <div class="check-row">
      <div class="sub-title">订单音</div>
      <div class="checkbox">
        <span class="label">播放订单声音</span>
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
      </div>
    </div>
    <div class="check-row">
      <div class="sub-title">单击交易</div>
      <div class="checkbox">
        <span class="label">允许单击执行交易操作而无需交易者的额外确认</span>
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
      </div>
    </div>
    <div class="title">信息</div>
    <div class="check-row">
      <div class="row">
        <span>振动</span>
        <div class="dro">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </div>
        <i class="van-badge__wrapper van-icon van-icon-arrow"><!----><!----><!----></i>
      </div>
    </div>
    <div class="check-row">
      <div class="row">
        <span>通知铃声</span>
        <div class="dro">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value2" :options="option2" />
          </van-dropdown-menu>
        </div>
        <i class="van-badge__wrapper van-icon van-icon-arrow"><!----><!----><!----></i>
      </div>
    </div>
    <div class="check-row">
      <div class="row">
        <span>Language</span>
        <div>zh-rCN</div>
        <i class="van-badge__wrapper van-icon van-icon-arrow"></i>
      </div>
    </div>
    <div class="title">界面</div>
    <div class="check-row">
      <div class="sub-title">平板电脑界面</div>
      <div class="checkbox">
        <span class="label">启用平板电脑界面</span>
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
      </div>
    </div>
  </div>
  <tabbar />
</template>

<style scoped lang="scss">
.content {
  padding: 0 10px;
}
.content .title {
  border-bottom: 1px solid rgb(200, 201, 204);
  padding-bottom: 10px;
  margin-top: 10px;
}

.content .check-row {
  padding: 0.26667rem 0;
  border-bottom: 1px solid rgb(200, 201, 204);
  .checkbox {
    display: flex;
  }
}

.content .check-row .label {
  font-size: 0.37333rem;
  color: #a1a2a7;
  display: flex;
  flex: 1;
}

.content .check-row .van-checkbox {
  justify-content: space-between;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    flex: 1;
  }
}
:deep(.van-dropdown-menu__bar) {
    box-shadow: none;
}

:deep(.van-dropdown-menu__title:after){
    display: none
}

</style>
